import React from 'react';
import "../css/Home.css"
import {HashRouter,Route, Link} from 'react-router-dom'
import Company from './Company '
import Contact from './Contact'
import Culture from './Culture'
import Grow from './Grow'
import Investor from './Investor'
import Join from './Join'
import Nwes from './News'
import Team from './Team'
class Home extends React.Component{
    constructor(props){
        super(props)
        this.state={
            list:["小米商城","MIUI","loT","云服务","天星数科","有品","小爱开放平台","企业团购","资质证照","协议规则","下载app","智能生活","select Location"],
            data:["全部商品分类","小米手机","小米手机","电视","笔记本","家电","路由器","智能控件","服务","社区"]
        }
    }
        render(){
            return(
                <HashRouter>
                <div className="mi_container">
                    <div className="mi_container_top">
                        <div className="mi_container_top_left">
                            {
                                this.state.list.map((element,index)=>{
                                return <div>{element}</div>
                                })
                            }
                        </div>
                        <div className="mi_container_top_right">
                            <div><Link to="/logon">登录</Link></div>
                            <div><Link to="/login">注册</Link></div>
                            <div>消息通知</div>
                            <div>购物车</div>
                        </div>
                    </div>
                    <div className="mi_container_body">
                    <div className="mi_container_body_image">
                        <img src='/assets/MiLogo.jpg' alt=""/>
                    </div>
                    <div className="mi_container_body_content">
                        {   
                        this.state.data.map((contnet)=>{
                        return <div>{contnet}</div>
                        })
                    }
                    
                    </div>
                    <div className="mi_container_body_input">
                        <input/><button>
                        ☆
                        </button>
                    </div>
                    </div>
                    <div className='mi_container_footer'>
                <div className="page">首页</div>
                <div>/</div>
                <div>关于小米</div>
                <div>/</div>
                <div></div>
                    </div>
                    <div className="mi_container_router">
                        <div className="mi_container_router_content">
                            <div><Link to="/Company">公司简介</Link></div>
                            <div><Link to="/Team">管理团队</Link></div>
                            <div><Link to="/Culture">小米文化</Link></div>
                            <div><Link to="/Grow">发展经历</Link></div>
                            <div><Link to="/News">小米新闻</Link></div>
                            <div><Link to="/Join">加入小米</Link></div>
                            <div><Link to="/Investor">投资者关系</Link></div>
                            <div><Link to="/Contact">联系我们</Link></div>
                        </div>
                        <div className="route">
                            <Route path="/Company" component={Company}/>
                            <Route path="/Contact" component={Contact}/>
                            <Route path="/Culture" component={Culture}/>
                            <Route path="/Grow" component={Grow}/>
                            <Route path="/Investor" component={Investor}/>
                            <Route path="/Join" component={Join}/>
                            <Route path="/News" component={Nwes}/>
                            <Route path="/Team" component={Team}/>
                        </div>
                    </div>
                </div>
                </HashRouter>
            );
        }
}

export default Home